<template>
    <div class="bodyDiv" @dragover.prevent @drop="onDrop">
      <!-- 添加画布区域 -->
      <div class="canvas">
        <div 
          v-for="(item, index) in canvasItems" 
          :key="item.id"
          class="dragDiv cloned"
          :style="{ left: item.x + 'px', top: item.y + 'px', backgroundColor: item.color }"
          draggable="true"
          @dragstart="onCanvasDragStart(index, $event)"
          @contextmenu.prevent="showContextMenu($event, index)"
        >
          {{ item.content }}<br>ID:{{ item.id }}
          <div v-if="activeMenuIndex === index" class="context-menu" :style="{ left: menuPosition.x + 'px', top: menuPosition.y + 'px' }">
            <button @click="deleteItem(index)">删除</button>
            <button @click="openSettings(index)">设置</button>
          </div>
        </div>
      </div>
      
      <div class="rightDiv">
        <template v-for="(item, index) in list" :key="index">
          <div 
            class="dragDiv" 
            draggable="true" 
            @dragstart="onDragStart(index, $event)"
            :style="{ backgroundColor: item.color }"
          >
            {{ item.content }}<br>ID:{{ index }}
          </div>
        </template>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from "vue";
  
  interface CanvasItem {
    id: number;
    x: number;
    y: number;
    content: string;
    color: string;
  }
  
  const canvasItems = ref<CanvasItem[]>([]);
  let list = [
    { content: "元素1", color: "#ff7675" },
    { content: "元素2", color: "#74b9ff" },
    { content: "元素3", color: "#55efc4" }
  ];
  
  const onDragStart = (index: number, e: DragEvent) => {
    e.dataTransfer?.setData("text/plain", JSON.stringify({
      type: "new",
      index
    }));
  };
  
  const onDrop = (e: DragEvent) => {
    e.preventDefault();
    const data = e.dataTransfer?.getData("text/plain");
    if (!data) return;
  
    const { type, index } = JSON.parse(data);
    
    console.log('data',data)
    if (type === "new") {
      const newItem = {
        id: Date.now(),
        x: e.clientX - 100,
        y: e.clientY - 100,
        content: `拖拽后的${list[index].content}`,
        color: list[index].color
      };
      canvasItems.value.push(newItem);
    } else if (type === "move") {
      const itemIndex = parseInt(index);
      canvasItems.value[itemIndex].x = e.clientX - 100;
      canvasItems.value[itemIndex].y = e.clientY - 100;
    }
  };
  
  const onCanvasDragStart = (index: number, e: DragEvent) => {
    e.dataTransfer?.setData("text/plain", JSON.stringify({
      type: "move",
      index
    }));
  };
  
  const activeMenuIndex = ref<number | null>(null);
  const menuPosition = ref({ x: 0, y: 0 });
  
  const showContextMenu = (e: MouseEvent, index: number) => {
    menuPosition.value = { x: e.clientX, y: e.clientY };
    activeMenuIndex.value = index;
  };
  
  const deleteItem = (index: number) => {
    canvasItems.value.splice(index, 1);
    activeMenuIndex.value = null;
  };
  
  const openSettings = (index: number) => {
    const itemId = canvasItems.value[index].id;
    alert(`当前元素ID: ${itemId}`);
    activeMenuIndex.value = null;
  };
  
  // 点击其他地方关闭菜单
  document.addEventListener('click', () => {
    activeMenuIndex.value = null;
  });
  </script>
  
  <style scoped>
  .rightDiv {
    position: fixed;
    top: 0;
    right: 0;
    width: 600px;
    height: 100vh;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .dragDiv {
    min-width: 350px;
    min-height: 30%;
    background-color: red;
    color: #fff;
  }
  .bodyDiv {
    width: 100%;
    height: 100vh;
  }
  .canvas {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .cloned {
    position: absolute;
    cursor: move;
  }
  
  .context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  
  .context-menu button {
    display: block;
    width: 100%;
    padding: 5px 10px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 1px solid #eee;
  }
  
  .context-menu button:last-child {
    border-bottom: none;
  }
  
  .context-menu button:hover {
    background-color: #f0f0f0;
  }
  </style>
  